<template>
  <common>
    <div class="ve_container">
      <div class="reg_cont">
        <div class="title_cont flex_center_between">
          <div class="left cur" @click="back"><i class="el-icon-arrow-left"></i>机构注册</div>
          <div class="rigth flex_center">
            我是教师， <span class="themeFont cur" ><router-link to="/login">去登录</router-link> </span>
          </div>
        </div>
        <el-form
          ref="myForm"
          label-position="left"
          :model="form"
          :rules="rules"
          :hide-required-asterisk="true"
        >
          <el-form-item prop="agentCode">
            <el-input v-model="form.agentCode" placeholder="请输入机构编码">
              <template #prefix>
                <div class="flex_c_c h_full">
                  <img src="@/assets/img/1.png" alt="" srcset="">
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="type">
            <el-select style="width: 100%;" v-model="form.type" placeholder="请选择注册用户类型">
              <el-option label="教练" value="1"></el-option>
              <el-option label="学生" value="2"></el-option>
              <template #prefix>
                <div class="flex_c_c h_full">
                  <img src="@/assets/img/2.png" alt="" srcset="">
                </div>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" >
              <template #prefix>
                <div class="flex_c_c h_full">
                  <img src="@/assets/img/3.png" alt="" srcset="">
                </div>
            </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入手机号" >
            <template #prefix>
              <div class="flex_c_c h_full">
                <img src="@/assets/img/4.png" alt="" srcset="">
              </div>
            </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input placeholder="请输入验证码" v-model="form.code" class="cur">
                <template slot="append">
                  <div @click="sendSmsCode(2)">{{canSendSms ? '发送验证码' : countDown +'s后重新发送'}}</div>
                </template>
                <template #prefix>
                  <div class="flex_c_c h_full">
                    <img src="@/assets/img/5.png" alt="" srcset="">
                  </div>
                </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
            >
            <template #prefix>
              <div class="flex_c_c h_full">
                <img src="@/assets/img/6.png" alt="" srcset="">
              </div>
            </template>
          </el-input>
          </el-form-item>
          
          <div class="row_deal">
            <el-checkbox v-model="checked"></el-checkbox>
            <span class="text">已阅读并同意 </span>
            <span class="user cur" @click="showAgreementFun(1)">《用户协议》</span>、
            <span class="privacy cur" @click="showAgreementFun(2)">《隐私协议》</span>
          </div>
          <el-form-item class="tc">
            <el-button
              style="width: 100%; margin-bottom: 20px"
              type="primary"
              @click="registerSubmit"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 协议 -->
    <bear_dialogVue
          ref="agreementDialog"
          :title="agreementTitle"
          :width="'35%'"
          :height="'80vh'"
          :isShowCancel="false"
          :isShowConfirm="false"
          >
          <div class="pass_cont">
             <template v-if="showAgreement == 1">
               <div v-html="agreementConfig.serviceAgreement"></div>
             </template>
             <template v-else>
               <div v-html="agreementConfig.privacyAgreement"></div>
              </template>
          </div>
      </bear_dialogVue>

  </common>
</template>
<script>
import bear_dialogVue from '@/views/components/bear_dialog.vue'
import common from "@/views/components/Common";
import { register, smsCode } from "@/api/auth.js";
import { config } from '@/api/config.js'
import { checkMobile } from '@/utils/validate'
export default {
  name: "reg-page",
  components: {
    bear_dialogVue,
    common
  },
  data() {
    return {
      form: {
        name: "",
        type: "",
        mobile: "",
        agentCode: "",
        password: "",
        code: "",
      },
      activeName: "0",
      checked: false,
      rules: {
        name: [
          {required: true, message: "请输入姓名", trigger: 'blur'},
        ],
        type: [
          {required: true, message: "请选择注册类型", trigger: 'change'},
        ],
        agentCode: [
          {required: true, message: "请输入机构编码", trigger: 'blur'},
        ],
        mobile: [
          { required: true, validator: checkMobile }
        ],
        password: [
          { required: true, message: '请输入密码' },
          { min: 6, max: 15, message: '密码为6-15位', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
          { min: 6, max: 6, message: '长度必须是6位', trigger: 'change' }
        ]
      },
      timer: null,
			countDown: 60,
			canSendSms: true,
      agreementTitle: '用户协议',
      showAgreement: 0, // 0 不显示 1 显示用户协议 2 显示隐私协议
      agreementConfig: {
        serviceAgreement: '',
        privacyAgreement: ''
      }
    };
  },
  mounted() {
    this.getAgreementConfig()
  },
  methods: {
    back(){
      this.$router.back()
    },
    getAgreementConfig() {
        config({
          key: ['service_agreement', 'privacy_agreement']
        }).then(res => {
            this.agreementConfig.serviceAgreement = res.data.service_agreement
            this.agreementConfig.privacyAgreement = res.data.privacy_agreement
        })
    },
    handleClick(tab, event) {
    },
    async registerSubmit() {
      await this.$refs.myForm.validate(async (valid) => {
        if (!valid) {
          return false
        }

        if (!this.checked) {
          this.$message.error('请先阅读并同意《用户协议》、《隐私协议》')
          return false
        }

        await register(this.form).then(res => {
            if (res.error == 0) {
              this.$message.success('注册成功')
              if (this.form.type == 1) {
                this.$router.push({path: '/login', query: { mobile: this.form.mobile }})
              }else{
                this.$router.push({path: '/login'})
              }
            } else {
              this.$message.error(res.message)
            }
        })

      })
    },
    sendSmsCode() {

      if (this.form.mobile == '') {
          this.$message.error('请输入手机号')
          return false
      }

      if (!this.canSendSms) {
        return false
      }

      let param = {
        mobile: this.form.mobile,
        type: 1
      }
      
      smsCode(param).then(res => {
            if (res.error == 0) {
              this.$message.success('发送成功')
              this.canSendSms = false
              this.timer = setInterval(()=>{
                this.countDown = this.countDown - 1
                if(!this.countDown){
                    clearInterval(this.timer)
                    this.canSendSms = true
                    this.countDown = 60
                }
              },1000)
            }else{
              this.$message.error(res.message)
            }
        })
    },
    reset() {
      this.$refs.myForm.resetFields();
    },
    showAgreementFun(val) {
      this.showAgreement = val
      if (val == 1) {
          this.agreementTitle = '用户协议'
      }else{
          this.agreementTitle = '隐私协议'
      }
      this.$refs.agreementDialog.openDialog()
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.ve_container {
  position: absolute;
  z-index: 1;
  width: 1000px;
  // height: 632px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s;
  min-height: 273px;
  text-align: center;
  border-radius: 20px;
  opacity: 0.88;
  background: #ffffff;
  backdrop-filter: blur(16px);
  box-shadow: 0px 18px 25px 0px #bbddf3;

  .reg_cont {
    width: 514px;
    padding: 40px 0;
    margin: auto;
    .title_cont {
      margin-bottom: 40px;
      .left {
        font-size: 24px;
      }
      .right {
        font-size: 14px;
      }
    }
  }
}

.row_deal {
  margin-bottom: 58px;
  font-size: 12px;
  color: #4a4a4a;
  text-align: left;
  .text{
    margin-left: 10px;
  }
  .user {
    color: #019E69;
  }

  .privacy {
    color: #019E69;
  }

  .nopass {
    color: $theme-color;
    margin-left: 30px;
  }
}

.login-page {
  min-height: 100vh;
  background: url(@/assets/login-bg.svg) no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .el-card {
    width: 420px;

    ::v-deep .el-card__header {
      height: 80px;
      background: rgba(114, 124, 245, 1);
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 18px;
    }
  }

  .el-form {
    padding: 0 20px;
  }

  .tc {
    text-align: center;
  }
}

.texet {
  color: $theme-color;
}
::v-deep .el-input--prefix .el-input__inner{
  padding-left:35px;
}
</style>
